<template>
  <div id="app">
    <router-view></router-view>
    <!-- :key="$route.fullPath" -->
    <!-- 隐藏的播放器 -->
    <audio
      v-show="false"
      :src="PublicmusicPath"
      controls
      @timeupdate="getCurr"
      @pause="is_stop = true"
      @play="is_stop = false"
      ref="audio"
      @canplay="showLong"
    ></audio>
    <!-- 播放器列表 -->
    <van-popup
      v-model="playershow"
      position="bottom"
      :style="{ height: '60%' }"
      @popup-close-icon-z-index="999999"
      class="publicsonglist"
      @click.stop
    >
      <!-- 播放器列表头部 -->
      <div class="publicsonglist-top">
        <h5>
          当前播放<span>({{ Publicsonglistdata.length }})</span>
        </h5>
        <p @click="loopplayback">
          <van-icon name="exchange" v-if="listloop"> 列表循环</van-icon
          ><!-- 列表循环 -->
          <van-icon name="replay" v-if="sequentialcycle"> 顺序循环</van-icon
          ><!-- 顺序循环 -->
          <b v-if="oneloop">① 单曲播放</b
          ><!-- 单曲播放 -->
          <span
            ><van-icon name="down" /><van-icon name="send-gift-o" /><van-icon
              name="delete-o"
          /></span>
        </p>
      </div>
      <!-- 播放器列表歌曲列表渲染 -->
      <ul class="publicsonglist-ul">
        <li
          v-for="(item, index) in Publicsonglistdata"
          :key="item.id"
          @click="publicplayercutsong(item.id, index)"
        >
          <span>{{ item.al.name }}</span
          ><b v-if="item.ar">- {{ item.ar[0].name }}</b>
          <van-icon name="cross" />
        </li>
      </ul>
    </van-popup>
    <div v-if="$route.meta.musicplaying" id="gongbottom">
      <!-- 底部音乐播放器 -->
      <div class="bottomplay" @click="goplayings">
        <!-- v-if="this.$route.meta.musicplay" -->
        <img
          v-if="Publicplayerlistone.al"
          :src="Publicplayerlistone.al.picUrl"
          alt=""
        />
        <span v-if="Publicplayerlistone.al"
          >{{ Publicplayerlistone.name }} --
          {{ Publicplayerlistone.ar[0].name }}</span
        >
        <span v-if="!Publicplayerlistone.al">无歌曲,需歌曲才能播放</span>
        <div>
          <b @click.stop="playpause"
            ><van-icon
              name="play-circle-o"
              v-if="!suspend"
            /><!-- 暂停 --><van-icon
              name="pause-circle-o"
              v-if="suspend"
            /><!-- 播放 --></b
          >
          <van-icon name="ellipsis" @click.stop="playersonglist" />
        </div>
        <!-- 进度条 -->
        <!-- <van-slider
          class="progressbar"
          v-model="progress"
          active-color="#ee0a24"
          @change="changeLong"
        >
          <template #button>
            <div class="custom-button"></div>
          </template>
        </van-slider> -->
      </div>
      <!-- 共用底部 -->
      <van-tabbar
        id="tabbar"
        route
        v-if="$route.meta.showFooter"
        style="z-index: 999999"
        active-color="#ee0732"
        inactive-color="rgb(157 152 152)"
      >
        <van-tabbar-item
          icon="music-o"
          :to="{ name: 'Search', query: { time: new Date().getTime() } }"
          >发现</van-tabbar-item
        >
        <van-tabbar-item
          icon="fire-o"
          :to="{ name: 'Podcast', query: { time: new Date().getTime() } }"
          >播客</van-tabbar-item
        >
        <van-tabbar-item
          icon="contact"
          :to="{ name: 'Home', query: { time: new Date().getTime() } }"
          >我的</van-tabbar-item
        >
        <van-tabbar-item
          icon="friends-o"
          :to="{ name: 'Follow', query: { time: new Date().getTime() } }"
          >关注</van-tabbar-item
        >
        <van-tabbar-item
          icon="flower-o"
          :to="{ name: 'Yuncun', query: { time: new Date().getTime() } }"
          >云村</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { setSong, getSong } from "./utils/auth";
export default {
  name: "App",
  data() {
    return {
      suspend: false, //播放暂停
      playershow: false, //弹出框
      listloop: false, //列表循环
      sequentialcycle: true, //顺序循环
      oneloop: false, //单曲播放
      mingcheng: 222, //临时存放数量的
      PublicplayerID: "", //公用播放器id
      PublicplayerlistID: "", //公用播放器列表id
      Publicsonglistdata: [], //存放歌单列表数据
      Publicplayerlistone: {}, //对应歌曲的信息
      PublicmusicPath: "", //mp3链接
      progress: 0,
      is_stop: true, //暂停与播放
      duration: 0,
      curr: 0,
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  components: {},
  watch: {
    $route: function (to, from) {
      //做更新操作
      // this.getpublicplayerdata();
    },
  },
  methods: {
    //秒数转化为mm:ss形式
    toTime(sec) {
      let s = sec % 60 < 10 ? "0" + (sec % 60) : sec % 60;
      let min =
        Math.floor(sec / 60) < 10
          ? "0" + Math.floor(sec / 60)
          : Math.floor(sec / 60);
      return min + ":" + s;
    },
    //音频进度改变时触发
    getCurr() {
      if (this.$refs.audio) {
        this.curr = parseInt(this.$refs.audio.currentTime);
        this.progress = (this.curr / this.duration) * 100;
      }
    },
    //音频加载成功后获取时长
    showLong() {
      this.duration = parseInt(this.$refs.audio.duration);
    },
    //改变进度
    changeLong() {
      let ct = (this.progress * this.duration) / 100;
      if (!isNaN(ct)) {
        this.$refs.audio.currentTime = ct;
      }
    },
    //去播放器页面
    goplayings() {
      if (getSong()) {
        this.$router.push("/playpage");
        this.getpublicplayerdata();
        this.suspend = false;
      }
    },
    //为底部播放器获取本地是否传入歌单id及歌曲id
    async getpublicplayerdata() {
      if (getSong()) {
        // this.$route.meta.musicplay = true;
        const songinformation = JSON.parse(getSong());
        this.PublicplayerID = songinformation.songId;
        this.PublicplayerlistID = songinformation.listId;
        const result = await axios.get(
          `http://192.168.31.27:3000/playlist/track/all?${this.param}&id=${
            this.PublicplayerlistID
          }&timestamp=${new Date().getTime()}`,
          {
            withCredentials: true,
          }
        );
        result.data.songs.forEach((item) => {
          if (this.PublicplayerID == item.id) {
            this.Publicplayerlistone = item;
          }
        });
        this.Publicsonglistdata = result.data.songs;
        const results = await axios.get(
          `http://192.168.31.27:3000/song/url?${this.param}&id=${
            this.PublicplayerID
          }&timestamp=${new Date().getTime()}`,
          {
            withCredentials: true,
          }
        );
        if (results.data.data[0].url) {
          this.PublicmusicPath = results.data.data[0].url;
        }
      }
      /* if (!getSong()) {
        this.$route.meta.musicplay = false;
      } */
    },
    //暂停播放
    playpause() {
      if (getSong()) {
        this.suspend = !this.suspend;
        if (this.suspend) {
          this.is_stop = true;
        } else {
          this.is_stop = false;
        }
        if (this.is_stop) {
          if (this.$refs.audio.play()) {
            this.$refs.audio.play();
          }
        } else {
          this.$refs.audio.pause();
        }
      }
    },

    //播放器歌单的列表
    playersonglist() {
      this.playershow = true;
    },
    //切换播放模式
    loopplayback() {
      if (this.listloop) {
        this.sequentialcycle = true;
        this.listloop = false;
        this.oneloop = false;
      } else if (this.sequentialcycle) {
        this.sequentialcycle = false;
        this.listloop = false;
        this.oneloop = true;
      } else if (this.oneloop) {
        this.sequentialcycle = false;
        this.listloop = true;
        this.oneloop = false;
      }
    },
    //点击歌单列表里的某个歌切换播放的歌曲
    publicplayercutsong(songId) {
      this.suspend = false;
      const song = {
        listId: this.PublicplayerlistID,
        songId,
      };
      setSong(JSON.stringify(song));
      this.playershow = false;
      this.getpublicplayerdata();
    },
  },
  //这个是关闭浏览器或者网页删除本地存储的作用
  mounted() {
    window.onload = function () {
      if (!window.sessionStorage["ISlogin"]) {
        // 关闭浏览器
        // window.localStorage.removeItem("token");//删除单个本都存储
        window.localStorage.clear(); //清空本地存储
      } else {
        // 刷新
      }
    };
    window.onunload = function () {
      window.sessionStorage["ISlogin"] = true;
    };
    window.onbeforeunload = function () {
      window.sessionStorage["ISlogin"] = true;
    };
  },
  created() {
    this.getpublicplayerdata();
  },
  mounted() {},
};
</script>

<style>
#app {
  margin: 0;
  padding: 0;
}
/* .van-tabbar-item--active{} */
#gongbottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-bottom: -1px;
}
#tabbar {
  position: relative;
}
.bottomplay {
  background-color: white;
  height: 70px;
  margin-bottom: -5px;
  line-height: 58px;
  width: 100%;
  padding: 5px 20px;
  box-sizing: border-box;
  z-index: 999999;
  border-top: 1px solid red;
}

.bottomplay img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  border-radius: 50%;
  float: left;
}
.bottomplay span {
  display: inline-block;
  width: 50%;
  margin-left: 5px;
  white-space: nowrap; /* 强制不换行 */
  overflow: hidden; /* 超出文本隐藏 */
  text-overflow: ellipsis; /* 超出文本以省略号显示 */
}
.bottomplay div {
  float: right;
}
.bottomplay div i {
  font-size: 30px;
  margin: 0 5px;
}
/* 歌单列表 */
#app .publicsonglist {
  width: 90%;
  left: 5%;
  bottom: 20%;
  border-radius: 3%;
  box-sizing: border-box;
  padding: 0 10px;
  z-index: 999999;
}
.publicsonglist .publicsonglist-top {
  width: 85%;
  position: inherit;
  height: 120px;
  background-color: white;
  z-index: 222;
  box-sizing: border-box;
}
.publicsonglist .publicsonglist-top h5 {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: bolder;
  padding-top: 30px;
  letter-spacing: 2px;
}
.publicsonglist .publicsonglist-top p {
  line-height: 30px;
}
.publicsonglist .publicsonglist-top p span {
  float: right;
  margin-right: 10px;
  font-size: 24px;
}
.publicsonglist .publicsonglist-top p span i {
  margin: 0 10px;
}
.publicsonglist .publicsonglist-ul {
  margin-top: 120px;
}
.publicsonglist-ul li {
  height: 40px;
  line-height: 40px;
  padding-right: 10px;
}
.publicsonglist-ul li span {
  font-size: 16px;
}
.publicsonglist-ul li b {
  font-size: 12px;
  color: gray;
  margin: 0 10px;
}
.publicsonglist-ul li i {
  color: gray;
  float: right;
  line-height: 40px;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  text-decoration: none;
}
</style>
